<template>
  <div class="container">
    <h1 style="text-align: center">表格合并</h1>
    <el-table
      :data="tableData"
      :span-method="flag ? fn : arraySpanMethod"
      border
      style="width: 100%"
      @cell-click="cellClick"
      :cell-class-name="tableCellClassName"
    >
      <el-table-column prop="age" label="年龄" width="200"></el-table-column>
      <el-table-column label="金额" width="50">
        <el-table-column label="百万" prop="amount8" width="50">
          <template slot-scope="scope">
            <span v-if="flag">{{ scope.row.amount8 }}</span>
            <div v-else>
              <el-input
                v-model="scope.row.num"
                @blur="handleBlur()"
                @input="handleInput(scope, 'first', $event)"
                maxlength="10"
              @change="handleChange(scope, $event)"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="amount7" width="50" label="十万">
        </el-table-column>
        <el-table-column prop="amount6" width="50" label="万">
        </el-table-column>
        <el-table-column prop="amount5" width="50" label="千">
        </el-table-column>
        <el-table-column prop="amount4" width="50" label="百">
        </el-table-column>
        <el-table-column prop="amount3" width="50" label="十">
        </el-table-column>
        <el-table-column prop="amount2" width="50" label="元">
        </el-table-column>
        <el-table-column prop="amount1" width="50" label="角">
        </el-table-column>
        <el-table-column prop="amount0" width="50" label="分">
        </el-table-column>
      </el-table-column>
      <el-table-column label="金额" width="50">
        <el-table-column label="百万" prop="a8" width="50">
          <template slot-scope="scope">
            <span v-if="flag">{{ scope.row.a8 }}</span>
            <div v-else>
              <el-input
                v-model="scope.row.num2"
                @blur="handleBlur()"
                @input="handleInput(scope, 'second', $event)"
                maxlength="10"
              @change="handleChange1(scope, $event)"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="a7" width="50" label="十万"> </el-table-column>
        <el-table-column prop="a6" width="50" label="万"> </el-table-column>
        <el-table-column prop="a5" width="50" label="千"> </el-table-column>
        <el-table-column prop="a4" width="50" label="百"> </el-table-column>
        <el-table-column prop="a3" width="50" label="十"> </el-table-column>
        <el-table-column prop="a2" width="50" label="元"> </el-table-column>
        <el-table-column prop="a1" width="50" label="角"> </el-table-column>
        <el-table-column prop="a0" width="50" label="分"> </el-table-column>
      </el-table-column>
      <el-table-column prop="" width="100" label="操作">
        <template slot-scope="scope">
          <el-button type="" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { message } from 'element-ui'
export default {
  name: 'Count',
  data () {
    return {
      val: '',
      tableData: [{
        age: 12,
        num: '123',
        num2: '',
        amount0: '',
        amount1: '',
        amount2: '',
        amount3: '',
        amount4: '',
        amount5: '',
        amount6: '',
        amount7: '',
        amount8: '',
        a0: '',
        a1: '',
        a2: '',
        a3: '',
        a4: '',
        a5: '',
        a6: '',
        a7: '',
        a8: '',
      }, {
        age: 13,
        num: '',
        num2: '',
        amount0: '',
        amount1: '',
        amount2: '',
        amount3: '',
        amount4: '',
        amount5: '',
        amount6: '',
        amount7: '',
        amount8: '',
        a0: '',
        a1: '',
        a2: '',
        a3: '',
        a4: '',
        a5: '',
        a6: '',
        a7: '',
        a8: '',
      }
      ],
      flag: true,
      judge: true,
      rowIndex: 0
    }
  },
  computed: {
  },
  watch: {
    judge (val) {
      console.log('val: ', val)
    }
  },
  mounted () {
  },

  methods: {
    handleEdit (row) {
      console.log('row: ', row)

    },

    tableCellClassName ({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },


    handleInput (scope, sign, val) {
      const { $index } = scope
      if (val === '') return
      let pattern = /^(([1-9]{1}\d{0,6})|(0{1}))(\.\d{0,2})?$/
      console.log('pattern: ', pattern.test(val))
      if (!pattern.test(val)) {
        message.warning('最多输入7位整数2位小数')
        if (sign == 'first') {
          this.tableData[$index].num = val.slice(0, val.length - 1)
        } else {
          this.tableData[$index].num2 = val.slice(0, val.length - 1)
        }
      }
    },

    handleBlur () {
     


      this.flag = true

    },


    handleChange (scope, val) {
      const { $index } = scope
      console.log('scope: ', scope)
      console.log('val: ', val)
      console.log('val: ', val.length)
      let arr = val.split('')
      console.log('arr: ', arr.length)
      // 没有小数点
      if (arr.some(item => item === '.')) {
        console.log('有小数点')
        let index = val.indexOf('.')
        arr = arr.slice(0, index)
        console.log('arr: ', arr)
        let newVal = val.slice(index + 1)
        console.log('index: ', index)
        console.log('newVal: ', newVal)
        if (newVal.length === 0) {
          arr.push('0')
          arr.push('0')
        } else if (newVal.length === 1) {
          arr.push(newVal.toString())
          arr.push('0')
        } else {
          arr.push((newVal.slice(0, 1)).toString())
          arr.push((newVal.slice(1, 2)).toString())
        }
        console.log('arr: ', arr)

        // return false
        console.log('arr: ', arr)
        let num = 9 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`amount${arr.length - 1 - index}`] = item
        })
      } else {
        console.log('没有小数点')
        let num = 7 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`amount${arr.length + 1 - index}`] = item
        })
        this.tableData[$index].amount0 = this.tableData[$index].amount1 = '0'
        console.log('this.tableData: ', this.tableData)
      }
    },
    handleChange1 (scope, val) {
      const { $index } = scope
      let arr = val.split('')

      // 没有小数点
      if (arr.some(item => item === '.')) {
        console.log('有小数点')
        let index = val.indexOf('.')
        arr = arr.slice(0, index)

        let newVal = val.slice(index + 1)

        if (newVal.length === 0) {
          arr.push('0')
          arr.push('0')
        } else if (newVal.length === 1) {
          arr.push(newVal.toString())
          arr.push('0')
        } else {
          arr.push((newVal.slice(0, 1)).toString())
          arr.push((newVal.slice(1, 2)).toString())
        }

        // return false
        console.log('arr: ', arr)
        let num = 9 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`a${arr.length - 1 - index}`] = item
        })
      } else {
        console.log('没有小数点')
        let num = 7 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`a${arr.length + 1 - index}`] = item
        })
        this.tableData[$index].a0 = this.tableData[$index].a1 = '0'
        console.log('this.tableData: ', this.tableData)
      }
    },
    cellClick (row, column, cell, event) {
      // console.log('cell: ', cell);
      // console.log('column: ', column)
      this.rowIndex = row.index
      if (!this.flag) return false
      const arr = [
        'amount0',
        'amount1',
        'amount2',
        'amount3',
        'amount4',
        'amount5',
        'amount6',
        'amount7',
        'amount8',
        'a0',
        'a1',
        'a2',
        'a3',
        'a4',
        'a5',
        'a6',
        'a7',
        'a8',
      ]
      if (arr.some(item => item === column['property'])) {
        this.flag = false
        this.$nextTick(() => {
          // this.$refs[`input${row.index}`].focus()
          // this.$refs[`a`].focus()
        })
      }

      // const { label } = column
      // let labelArr = [
      //   // '百万',
      //   // '十万',
      //   // '万',
      //   '千',
      //   '百',
      //   '十',
      //   // '元',
      //   // '角',
      //   // '分',
      // ]
      // if (labelArr.some(item => item == label)) {
      //   this.$nextTick(() => {
      //     this.$refs[`input${row.index}`].focus()
      //   })
      // }
    },

    fn ({ row, column, rowIndex, columnIndex }) {
      return {
        rowspan: 1,
        colspan: 1
      }
    },

    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 10) {
        return [1, 9]
      } else if (
        columnIndex == 2 ||
        columnIndex == 3 ||
        columnIndex == 4 ||
        columnIndex == 5 ||
        columnIndex == 6 ||
        columnIndex == 7 ||
        columnIndex == 8 ||
        columnIndex == 9 ||
        columnIndex == 11 ||
        columnIndex == 12 ||
        columnIndex == 13 ||
        columnIndex == 14 ||
        columnIndex == 15 ||
        columnIndex == 16 ||
        columnIndex == 17 ||
        columnIndex == 18
      ) {
        return [0, 0]
      }
      else {
        return [1, 1]
      }
    }
  }
}
</script>

<style scoped>
</style>
